<!DOCTYPE html>
<html>

<head>
    <title>Personal</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all" />
    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.js"></script>
    <link href="./css/personal.css" rel="stylesheet" />
</head>

<script type="text/javascript">
    window.config = {
        serverHost: 'http://10.222.29.198:8080/amc-c',
        // serverHost: 'http://localhost:8080/amc-c'
    }

</script>

<body id="login">
    <div class="login-logo">
        <div class="banner1">
            <div class="container">
                <div class="header-nav">
                    <nav class="navbar navbar-default">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
					</button>
                            <div class="logo">
                                <a class="navbar-brand" href="#">Platform</a>
                            </div>
                        </div>

                        <div class="collapse navbar-collapse nav-wil">
                            <ul class="nav navbar-nav pull-right">
                                <li style="margin-right: 20px;"><a href="index.html">Home</a></li>
                                <li style="margin-right: 20px;"><a href="menu.html">Menu</a></li>
                                <li><a href="./personal.html">Personal</a></li>
                            </ul>
                        </div>
                    </nav>
                </div>
                <hr style="padding-left: 10px; padding-right: 10%" />
            </div>
        </div>
    </div>
    <div class="app-cam">
        <div class="col-md-5" style="background-color: #fff; min-height: 320px; margin-left: 28.5%;">
            <h3 style="padding: 20px 0 10px 0px; color:#9f9f9f;">Personal Infomation</h3>
            <div class="checkout-cart" checkout-cart="cart">
                <ul style="margin-bottom: 20px;">
                    <li class="checkoutcart-tablerow extra">
                        <span style="padding: 6px 12px">Username : <strong id="current_username">username</strong></span>
                    </li>
                    <hr />
                    <li class="checkoutcart-tablerow extra" style="height: 68px; line-height: 68px; ">
                        <span id="address_list" class="btn" style="color: blue;">Address <span style="color: red;">(Manager My Address)</span></span>
                    </li>
                    <hr />
                    <li class="checkoutcart-tablerow extra" style="height: 68px; line-height: 68px; ">
                        <span id="order_list" class="btn" style="color: blue;">My Order <span style="color: red;">(My Orders)</span></span>
                    </li>
                    <hr />
                </ul>
            </div>
        </div>
    </div>

    <div class="app-cam" style="margin-top: 30px;">
        <div class="col-md-5" style="background-color: #fff; margin-left: 28.5%;">
            <h3 id="op_title" style="padding: 20px 0 10px 0px; color:#9f9f9f;">Operation</h3>
            <hr style="margin-bottom: 10px;" />
            <div class="checkout-cart" checkout-cart="cart">
                <ul style="margin-bottom: 20px; max-height: 480px; overflow-x:hidden; overflow-y:scroll;">
                    <div id="op_content"></div>
                </ul>
            </div>
        </div>
    </div>

    <!-- update address -->
    <div class="modal fade" id="updateModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">
                        Update Address
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="row clearfix">
                        <div class="col-md-12 column">
                            <div class="form-horizontal">
                                <div class="form-group">
                                    <label for="username" class="col-sm-2 control-label">Concat Name</label>
                                    <div class="col-sm-5">
                                        <input type="hidden" id="u_addressId" />
                                        <input type="text" class="form-control" id="u_concactPerson" />
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="tel" class="col-sm-2 control-label">Concat Tel</label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control" id="u_concactTel" />
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="address" class="col-sm-2 control-label">Address</label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control" id="u_addressName" />
                                    </div>
                                </div>
                                <p id="errorText" style="padding-left: 80px; color: red;"></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button id="update_submit" type="button" class="btn btn-primary">提交</button>
                </div>
            </div>
        </div>
    </div>

    <!-- insert address  -->
    <div class="modal fade" id="createModal" role="dialog" aria-labelledby="createModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="createModalLabel">
                        Add Address
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="row clearfix">
                        <div class="col-md-12 column">
                            <div class="form-horizontal">
                                <div class="form-group">
                                    <label for="username" class="col-sm-2 control-label">Concat Name</label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control" id="a_concactPerson" />
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="tel" class="col-sm-2 control-label">Concat Tel</label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control" id="a_concactTel" />
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="address" class="col-sm-2 control-label">Address</label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control" id="a_addressName" />
                                    </div>
                                </div>
                                <p id="a_errorText" style="padding-left: 80px; color: red;"></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button id="create_submit" type="button" class="btn btn-primary">提交</button>
                </div>
            </div>
        </div>
    </div>

    <!-- remove address  -->
    <div class="modal fade" id="removeModal" role="dialog" aria-labelledby="removeModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="createModalLabel">
                        Delete Address
                    </h4>
                </div>
                <div class="modal-body">
                    <p id="removeText">Are you sure you want to delete this address?</p>
                    <input id="removeAddresId" type="hidden" />
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button id="remove_submit" type="button" class="btn btn-primary">提交</button>
                </div>
            </div>
        </div>
    </div>

</body>
<script src="./js/personal.js" type="text/javascript"></script>

</html>